<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>条件渲染</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <!-- 
            v-if指令的值: true/false
                    true 表示该元素会被渲染到页面上
                    false: 表示该元素不会被渲染到页面上(注意：不是修改了css样式，
                    是这个元素压根没有加载 )
         -->
         <div v-if="true">{{msg}}</div><br>
         <div v-if="2 === 1">{{msg}}</div><br>

         <button @click="counter++">点我加1</button>
         <h3>{{counter}}</h3>

         <img :src="imgPath1" v-if="counter % 2 ===1">
         <!-- <br>  v-if  v-else 两者在使用的时候，中间不能断开  -->
       <!--   <img :src="imgPath2" v-if="counter % 2 ===0"><br> -->
       <!-- 为了提高效率，可以使用 v-else 指令 -->
         <img :src="imgPath2" v-else >

  <!--        温度: <input type="number" v-model="temprature"><br><br>
         <span v-if="temprature <= 10">寒冷</span>
         <span v-if="temprature >= 10 && temprature <= 25">凉爽</span>
         <span v-if="temprature > 25">炎热</span> -->


         
         温度: <input type="number" v-model="temprature"><br><br>
         <span v-if="temprature <= 10">寒冷</span>
         <!-- <br> -->
         <!-- v-if v-else-if v-else 三者在使用的时候，中间不能断开 -->
         <span v-else-if="temprature <= 25">凉爽</span>
         <span v-else>炎热</span>

         <br><br><br>
         <!-- 

            v-show指令是通过修改元素的CSS样式的display属性来达到显示和隐藏的
            v-if和v-show应该如何选择？
                1.如果一个元素在页面上被频繁的隐藏和显示，建议使用v-show,因为此时使用v-if开销比较大
                2.v-if的优点，页面加载速度快，提高了页面的渲染效果
          -->
         <div v-show="false">你可以看到我吗</div>

<!-- 
         <div v-if="counter === 10">
            <input type="text">
            <input type="checkbox">
            <input type="radio">
         </div> -->

         <!-- template 就是占坑的一个作用，不会影响到页面结构，标签也
        不会渲染到页面上，比如：不会向 div 占用了页面结构 -->
         <template v-if="counter === 10">
            <input type="text">
            <input type="checkbox">
            <input type="radio">
         </template>
    </div>
    <script>
        const vm = new Vue ({
            el : '#app',
            data : {
                msg:'条件渲染',
                counter : 1,
                imgPath1:'../img/1.png',
                imgPath2:'../img/2.png',
                temprature : 0
            }
        })
    </script>
</body>
</html>